<template>
  <div class="hotel">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
      <el-breadcrumb-item>酒店预订</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 查看价格组件 -->
    <div class="priceCheck">
      <!-- 带输入建议 -->
      <el-row class="demo-autocomplete">
        <el-col :span="22">
          <el-autocomplete
            class="inline-input"
            v-model="changeCity"
            :fetch-suggestions="querySearch"
            placeholder="切换城市"
            :trigger-on-focus="false"
            @select="handleSelect"
          ></el-autocomplete>
        </el-col>
      </el-row>

      <!-- 入住离店选择器 -->
      <el-row class="block">
        <el-col :span="12">
          <el-date-picker
            v-model="hotelTime"
            type="daterange"
            range-separator="至"
            start-placeholder="入住日期"
            end-placeholder="离店日期"
          ></el-date-picker>
        </el-col>
      </el-row>

      <!-- 人数选择 -->
      <el-row class="peopleNumber">
        <el-col :span="30">
          <!-- 输入框 -->
          <el-input placeholder="人数未定" v-model="peopleNumber" suffix-icon="el-icon-user">
            <i class="el-icon-user"></i>
          </el-input>

          <!-- 弹出框 -->
          <el-popover
            placement="bottom"
            title=" "
            width="300"
            trigger="click"
            content=" "
            v-if="flag"
            readonly="readonly"
          >
            <el-button slot="reference" class="peopleNumberContent"></el-button>

            <!-- 弹出框下拉列表内容 -->
            <div class="eachRoom">
              <div class="eachRoomList">
                <div class="title">每间</div>

                <div class="select">
                  <el-select v-model="adultNum" :placeholder="`${adultNum}`">
                    <el-option
                      v-for="item in ['1','2','3','4','5','6','7']"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <span>成人</span>
                </div>

                <div class="select">
                  <el-select v-model="childrenNum" :placeholder="`${childrenNum}`">
                    <el-option
                      v-for="item in ['0','1','2','3','4']"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <span>儿童</span>
                </div>
              </div>

              <div class="sure">
                <el-button type="primary" @click="checkPerson">确定</el-button>
              </div>
            </div>
          </el-popover>
        </el-col>
      </el-row>

      <!-- 按钮：查看价格 -->
      <div class="priceCheckButton">
        <el-button type="primary" @click="handlePriceCheck">查看价格</el-button>
      </div>
    </div>

    <!-- 区域/均价/地图组件 -->
    <div class="area">
      <!-- 区域/均价 -->
      <div class="areaDetail">
        <div class="areaDetailTop" :class="{ hidden: isShow }">
          <span>区域：</span>
          <div class="areaDetailTop_city" v-if="currentCity.length">
            <span
              v-for="(item,index) in currentCity[0].scenics"
              :key="index"
              class="areaDetailTop_city_details"
            >{{ item.name }}</span>
          </div>
        </div>

        <div class="toggle" @click="isShow=!isShow" v-if="currentCity.length">
          <span></span>
          <div class="el-icon-d-arrow-right" :class="{ toggleItem: isShow }"></div>
          等{{ currentCity[0].scenics.length }}个区域
        </div>

        <div class="areaDetailBottom">
          <span>
            <p>均价</p>
            <el-tooltip
              class="item"
              effect="dark"
              content="等级均价由平日价格计算得出，节假日价格会有上浮。"
              placement="bottom-start"
            >
              <em>?</em>
            </el-tooltip>：
          </span>

          <el-tooltip
            class="item"
            effect="dark"
            content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
            placement="bottom-start"
          >
            <div class="rating">
              <div class="iconfont iconhuangguan"></div>
              <div class="iconfont iconhuangguan"></div>
              <div class="iconfont iconhuangguan"></div>
              <span>¥338</span>
            </div>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
            placement="bottom-start"
          >
            <div class="rating">
              <div class="iconfont iconhuangguan"></div>
              <div class="iconfont iconhuangguan"></div>
              <div class="iconfont iconhuangguan"></div>
              <div class="iconfont iconhuangguan"></div>
              <span>¥588</span>
            </div>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
            placement="bottom-start"
          >
            <div class="rating">
              <div class="iconfont iconhuangguan"></div>
              <div class="iconfont iconhuangguan"></div>
              <div class="iconfont iconhuangguan"></div>
              <div class="iconfont iconhuangguan"></div>
              <div class="iconfont iconhuangguan"></div>
              <span>¥889</span>
            </div>
          </el-tooltip>
        </div>
      </div>

      <!-- 地图 -->
      <div id="container"></div>
    </div>

    <!-- 筛选列表组件 -->
    <el-row type="flex" class="selectionList">
      <el-col :span="5">
        <div class="container_item container_item_price">
          <div class="price">
            <span>价格</span>
            <span>0-4000</span>
          </div>
          <el-slider v-model="priceArea" :max="4000" @change="checkPriceOptions"></el-slider>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="container_item">
          <div class="choice">
            <span>住宿等级</span>
            <span>
              <el-select
                v-model="hotelOptions.levels"
                multiple
                collapse-tags
                placeholder="不限"
                size="mini"
                @change="checkLevelsOptions"
              >
                <el-option
                  v-for="item in levels"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </span>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="container_item">
          <div class="choice">
            <span>住宿类型</span>
            <span>
              <el-select
                v-model="hotelOptions.types"
                multiple
                collapse-tags
                placeholder="不限"
                size="mini"
                @change="checkTypesOptions"
              >
                <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </span>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="container_item">
          <div class="choice">
            <span>酒店设施</span>
            <span>
              <el-select
                v-model="hotelOptions.assets"
                multiple
                collapse-tags
                placeholder="不限"
                size="mini"
                @change="checkAssetsOptions"
              >
                <el-option
                  v-for="item in assets"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </span>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="container_item">
          <div class="choice">
            <span>酒店品牌</span>
            <span>
              <el-select
                v-model="hotelOptions.brands"
                multiple
                collapse-tags
                placeholder="不限"
                size="mini"
                @change="checkBrandsOptions"
              >
                <el-option
                  v-for="item in brands"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </span>
          </div>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="container_item last">
          <el-button type="primary" @click="filtersCancel">撤销条件</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 酒店列表 -->
    <div class="hotelList">
      <div class="hotelItem" v-for="(item) in currentList" :key="item.id">
        <div class="hotelItem_imgbox">
          <img :src="item.photos" alt class="hotelItem_imgbox_img" v-if="item.photos" />
          <img src="@/assets/image/noPic.jpg" alt class="hotelItem_imgbox_img" v-else />
        </div>

        <div class="hotelItem_detail">
          <nuxt-link :to="`/hotel/${item.id}.html`">
            <h3>{{ item.name }}</h3>
          </nuxt-link>

          <div class="hotelItem_detail_spell">{{ item.alias }}</div>

          <div class="hotelItem_detail_type">
            <div class="iconfont icon-huangguan" style="color: #ff9900;"></div>
            <span>{{ item.hoteltype.name }}</span>
          </div>

          <div class="hotelItem_detail_comment">
            <el-rate
              class="hotelItemScore"
              v-model="item.stars"
              disabled
              show-score
              text-color="#ff9900"
              :score-template="`${item.stars}分`"
            ></el-rate>

            <span>
              <i>{{ item.all_remarks }}</i> 条评论
            </span>
            <span>
              <i>{{ item.visits_week }}</i> 篇游记
            </span>
          </div>

          <div class="hotelItem_detail_position">
            <i class="el-icon-location"></i>
            <span>{{ item.address }}</span>
          </div>
        </div>

        <div class="hotelItem_partner">
          <div class="hotelItem_partner_item" v-for="(product,index) in item.products" :key="index">
            <span class="hotelItem_partner_item_left">{{ product.name }}</span>
            <span class="hotelItem_partner_item_right">
              <em>￥{{ product.price }}</em>起
              <i class="el-icon-arrow-right"></i>
            </span>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import PriceCheck from "@/components/hotel/priceCheck";
import Area from "@/components/hotel/area";
import SelectionList from "@/components/hotel/selectionList";
import HotelList from "@/components/hotel/hotelList";

var moment = require("moment");

export default {
  components: {
    PriceCheck,
    Area,
    SelectionList,
    HotelList
  },

  data() {
    return {
      pageData: "", // 分页请求数据(变量)

      currentCity: [], // 实时城市详情
      cityId: "", // 实时城市ID

      changeCity: "", //城市
      hotelTime: "",
      peopleNumber: "",
      adultNum: "2",
      childrenNum: "0",

      currentList: [], //当前分页酒店信息
      stars: "", // 只读的评分
      pageIndex: 1, // 页数
      pageSize: 8, // 每页条数
      total: 0, // 总数据
      limit: "", //每页条数(改版)
      start: "", //开始数据（分页）

      isShow: true, // 切换显示/隐藏城市标识
      location: "", // 定位的城市
      currentdot: [],
      firstHotelName: "", //当地第一家宾馆名称

      priceArea: 4000, //价格区域
      levels: [], // 住宿等级
      types: [], // 住宿类型
      assets: [], // 酒店设施
      brands: [], // 酒店品牌
      hotelOptions: {
        // levels: [], // 住宿等级
        // types: [], // 住宿类型
        // assets: [], // 酒店设施
        // brands: [] // 酒店品牌
      },
      url: "", //价格路径
      levelsUrl: [], //住宿等级拼接路径
      typesUrl: [], //住宿类型拼接路径
      assetsUrl: [], //住宿设施拼接路径
      brandsUrl: [], //住宿品牌拼接路径

      flag: true
    };
  },

  mounted() {
    // 发送查找当前城市的请求
    // 以便根据城市ID来获取所有酒店详情
    // 调用获取当前城市的函数
    // console.log(this.$route.query.city);

    // 如果路由参数无城市名，实现定位，再跳转路由
    if (!this.$route.query.city) {
      this.locationMap();
    } else {
      this.namedMap();
    }
  },

  methods: {
    // 获取当前城市的函数
    async getCurrentCity() {
      // 将路由参数赋值
      let cityname = this.$route.query.city;

      // 判断如果路由为空则让定位名称赋值给路由参数
      // 否则直接发送请求
      if (!cityname) {
        cityname = this.location;
      }

      const res = await this.$axios({
        url: "/cities",
        params: {
          name: cityname
        }
      });

      if (res.data.data.length) {
        this.currentCity = res.data.data;
        console.log("实时城市", this.currentCity);

        // console.log("实时城市ID：", this.currentCity[0].id);

        this.cityId = this.currentCity[0].id;
        console.log(1112, this.cityId);
      }

      this.pageData = {
        city: this.cityId
      };

      this.getCurrentPage(this.pageData);

      this.checkPriceOptions();
    },

    // 发送酒店详情的分页请求
    getCurrentPage(pageData) {
      // Object.keys(pageData) = [city, _limit, _start,  Xxx]
      // paramsArr = [city=99, _limit=1]

      let paramsArr = Object.keys(pageData).map(key => {
        return `${key}=${pageData[key]}`;
      });

      paramsArr = paramsArr.filter(el => {
        return el.indexOf("undefined") <= -1;
      });

      console.log("路由键", Object.keys(pageData));
      console.log("路由参数数组", paramsArr);

      let url = "/hotels?" + paramsArr.join("&"); // city=99&_limit=1

      // this.$router.replace({ path: "?" + paramsArr.join("&") });

      this.$axios({
        url
      }).then(res => {
        console.log("酒店详情的分页:", res);

        this.total = res.data.total;

        this.currentList = res.data.data;

        console.log("总数", this.total);

        console.log("当地第一家宾馆纬度", res.data.data[0].location.latitude);
        console.log("当地第一家宾馆经度", res.data.data[0].location.longitude);

        let currentdot = [
          res.data.data[0].location.latitude,
          res.data.data[0].location.longitude
        ];

        console.log("哈哈哈", currentdot);
      });
    },

    // 获取酒店选项的函数
    getHotelOptions() {
      this.$axios({
        url: "/hotels/options"
      }).then(res => {
        console.log("酒店选项", res);
        let { levels, types, assets, brands } = res.data.data;

        this.levels = levels;
        this.types = types;
        this.assets = assets;
        this.brands = brands;
      });
    },

    // 筛选住宿价格的请求
    checkPriceOptions() {
      this.url =
        "/hotels?" + `city=${this.cityId}&` + `price_lt=${this.priceArea}`;

      this.$axios({
        url: this.url
      }).then(res => {
        this.total = res.data.total;
        this.currentList = res.data.data;
      });
    },

    // 筛选住宿等级的请求
    checkLevelsOptions(val) {
      this.levelsUrl = val.map(el => {
        return `hotellevel_in=${el}`;
      });

      this.url2 = this.url + `&` + this.levelsUrl.join("&");
      // console.log(222, this.url2);

      this.$axios({
        url: this.url2
      }).then(res => {
        this.total = res.data.total;
        this.currentList = res.data.data;
      });
    },

    // 筛选住宿类型的请求
    checkTypesOptions(val) {
      this.typesUrl = val.map(el => {
        return `hoteltype_in=${el}`;
      });

      this.url2 = this.url + `&` + this.typesUrl.join("&");

      this.$axios({
        url: this.url2
      }).then(res => {
        this.total = res.data.total;
        this.currentList = res.data.data;
      });
    },

    // 筛选酒店设备的请求
    checkAssetsOptions(val) {
      this.assetsUrl = val.map(el => {
        return `hotelasset_in=${el}`;
      });

      this.url2 = this.url + `&` + this.assetsUrl.join("&");

      this.$axios({
        url: this.url2
      }).then(res => {
        this.total = res.data.total;
        this.currentList = res.data.data;
      });
    },

    // 筛选酒店品牌的请求
    checkBrandsOptions(val) {
      this.brandsUrl = val.map(el => {
        return `hotelbrand_in=${el}`;
      });

      this.url2 = this.url + `&` + this.brandsUrl.join("&");

      this.$axios({
        url: this.url2
      }).then(res => {
        this.total = res.data.total;
        this.currentList = res.data.data;
      });
    },

    filtersCancel() {
      this.url = "";
      this.levelsUrl = "";
      this.typesUrl = "";
      this.assetsUrl = "";
      this.brandsUrl = "";
      this.checkPriceOptions();
      this.hotelOptions.levels = "";
      this.hotelOptions.types = "";
      this.hotelOptions.assets = "";
      this.hotelOptions.brands = "";
    },

    // ---------------------查看价格 JS---------------------

    // 封装请求城市的方法
    getCities(value) {
      return this.$axios({
        url: "/cities",
        params: {
          name: value
        }
      }).then(res => {
        // data是城市的数组
        const { data } = res.data;
        // data的属性没有value值，需要转换下
        const newData = data.map(v => {
          v.value = v.name.replace("市", "");
          return v;
        });

        return newData;
      });
    },
    querySearch(value, cb) {
      if (!value) {
        cb([]);
        return;
      }
      // 根据value请求城市
      this.getCities(value).then(newData => {
        cb(newData);
      });
    },
    handleSelect(item) {
      // console.log(item);
    },
    // 点击确定按钮传值给人数
    checkPerson() {
      if (this.childrenNum === "0") {
        this.peopleNumber = this.adultNum + "成人";
        return;
      }
      this.peopleNumber =
        this.adultNum + "成人" + " " + this.childrenNum + "儿童";

      this.flag = false;
    },

    // 查看价格按钮的函数
    handlePriceCheck() {
      const enterTime = moment(this.hotelTime[0])
        .format()
        .split("T")[0];
      const leftTime = moment(this.hotelTime[1])
        .format()
        .split("T")[0];

      const _limit = this.pageSize;
      const _start = (this.pageIndex - 1) * this.pageSize;

      let cityname = this.changeCity;

      console.log(123321, cityname);

      if (!cityname) {
        let cityname = this.location;
      }

      if (cityname) {
        this.$axios({
          url: "/cities",
          params: {
            name: cityname
          }
        }).then(res => {
          if (res.data.data.length) {
            let currentCity = res.data.data;
            let cityId = currentCity[0].id;

            // console.log("id", cityId);

            const checkForm = {
              city: cityId,
              enterTime,
              leftTime,
              _limit,
              _start
            };

            this.$axios({
              url: "/hotels",
              params: checkForm
            }).then(res => {
              this.total = res.data.total;
              this.currentList = res.data.data;
            });
          }
        });
      }

      if (this.changeCity && enterTime && leftTime) {
        this.$router.replace({
          path: `/hotel?enterTime=${enterTime}&leftTime=${leftTime}&city=${this.changeCity}`
        });
      } else if (this.changeCity) {
        this.$router.replace({
          path: `/hotel?enterTime=city=${this.changeCity}`
        });
      } else {
        return;
      }
    },

    // ---------------------区域 JS---------------------

    // 高德地图定位本地城市的函数
    locationMap() {
      // 2.地图库加载完毕的回调函数
      window.onLoad = () => {
        var map = new AMap.Map("container", {
          zoom: 14 //级别
        });

        AMap.plugin("AMap.CitySearch", () => {
          var citySearch = new AMap.CitySearch();
          citySearch.getLocalCity((status, result) => {
            // console.log(status, result);

            if (status === "complete" && result.info === "OK") {
              // 查询成功，result即为当前所在城市信息
              // console.log("当前所在城市", result.city);
              // function函数的this是指向它本身，因此需要使用箭头函数
              // 让this指向window,从而实现渲染

              this.location = result.city;

              this.$router.replace({ path: `/hotel?city=${this.location}` });

              this.getCurrentCity();

              this.getHotelOptions();

              // 弹出定位当前城市
              // this.$alert(`定位当前城市:${this.currentCity}`, "提示", {
              //   confirmButtonText: "确定",
              //   type: "success"
              // })

              // 将城市名赋值给this.$route.query设置路由，以便路由的获取
              // this.$route.query.city =this.currentCity;
            }
          });
        });
      };

      // 1.加载高德地图库
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=1d2a4f11df5502f6f56e25d11e602ab3&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },

    // 高德地图定位指定城市的函数
    namedMap(currentdot) {
      // 2.地图库加载完毕的回调函数
      window.onLoad = () => {
        var map = new AMap.Map("container", {
          zoom: 17, //级别
          center: [116.397451,39.909187] //中心点坐标
        });

        this.getCurrentCity();

        this.getHotelOptions();

        this.checkPriceOptions();
      };

      // 1.加载高德地图库
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=1d2a4f11df5502f6f56e25d11e602ab3&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },

    // ---------------------分页 JS---------------------

    // 切换每页条数时触发
    handleSizeChange(val) {
      this.pageSize = val;

      this.limit = this.pageSize;
      this.start = (this.pageIndex - 1) * this.pageSize;

      this.pageData = {
        city: this.cityId,
        _start: this.start,
        _limit: this.limit
      };

      this.getCurrentPage(this.pageData);
    },

    // 切换页数时触发
    handleCurrentChange(val) {
      this.pageIndex = val;

      this.limit = this.pageSize;
      this.start = (this.pageIndex - 1) * this.pageSize;

      this.pageData = {
        city: this.cityId,
        _start: this.start,
        _limit: this.limit
      };

      this.getCurrentPage(this.pageData);
    }
  },

  watch: {
    changeCity() {
      this.$router.replace({ path: `/hotel?city=${this.changeCity}` });

      this.namedMap();
    }
  }
};
</script>

<style scoped lang="less">
// 版心样式
.hotel {
  width: 960px;
  margin: 20px auto;
}

// 查看价格样式
.priceCheck {
  display: flex;
  margin: 20px 0;

  .peopleNumber {
    position: relative;
    margin-left: 6px;
    .peopleNumberContent {
      position: absolute;
      opacity: 0;
      width: 207px;
      height: 40px;
      top: 0;
      left: 0;
    }
  }
}

.eachRoom {
  .eachRoomList {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    .title {
      width: 100px;
    }
    .select {
      position: relative;
      width: 90px;
      padding-right: 8px;
      span {
        position: absolute;
        top: 12px;
        right: 36px;
        font-size: 12px;
      }
    }
  }

  .sure {
    padding-top: 8px;
    float: right;
  }
}

.priceCheckButton {
  padding-left: 10px;
}

// 区域样式
.area {
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 12px 2px;
  color: #333;

  .areaDetail {
    flex: 1;
    padding: 0px 10px;

    .hidden {
      height: 42px;
      overflow: hidden;
    }

    .areaDetailTop {
      display: flex;
      justify-content: space-between;

      > span {
        width: 12.5%;
      }

      .areaDetailTop_city {
        flex: 1;

        &_details {
          margin-right: 10px;
        }
      }
    }

    .toggle {
      display: flex;
      margin-top: 10px;
      cursor: pointer;

      > span {
        width: 12.5%;
      }

      .el-icon-d-arrow-right {
        position: relative;
        color: #ff9917;
        padding-right: 12px;
        transform: rotate(-90deg);
        top: -6px;
        left: -4px;
      }

      .toggleItem {
        position: relative;
        transform: rotate(90deg);
        top: 8px;
        left: -10px;
      }
    }

    .areaDetailBottom {
      display: flex;
      margin-right: 20px;
      margin-top: 20px;
      position: relative;

      > span {
        display: flex;
        width: 12.5%;

        > p {
          margin-right: 16px;
        }

        em {
          position: absolute;
          background-color: #ccc;
          width: 14px;
          height: 14px;
          line-height: 14px;
          text-align: center;
          border-radius: 50%;
          color: #fff;
          font-size: 12px;
          left: 34px;
          top: 0px;
        }
      }

      .rating {
        display: flex;
        line-height: 20px;
        margin-right: 20px;

        .iconhuangguan {
          color: #ff9900;
          font-size: 16px;
          margin-right: 2px;
        }

        > span {
          margin-left: 6px;
        }
      }
    }
  }

  #container {
    width: 400px;
    height: 250px;
  }
}

// 筛选区域
.selectionList {
  width: 100%;
  border: 1px solid #ddd;
  height: 80px;
  margin-top: 20px;
  padding: 6px 0;
  background-color: rgba(255, 255, 255, 0.7);

  .container_item {
    height: 66px;
    border-right: 1px solid #ddd;
    padding: 0 10px;

    &.last {
      border-right: 0px;
      padding: 0px;
      text-align: center;
      line-height: 66px;
    }

    .price {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }

    .choice {
      > span {
        font-size: 14px;
      }

      .el-select {
        margin-top: 10px;
      }
    }
  }

  .container_item_price {
    padding: 0 20px;
  }
}

// 酒店列表样式
.hotelList {
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.5);

  .hotelItem {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    border-bottom: 1px solid #ddd;

    &_imgbox {
      &_img {
        width: 320px;
        height: 210px;
        object-fit: cover;
        cursor: pointer;
      }
    }

    &_detail {
      flex: 1;
      margin-left: 20px;

      h3 {
        font-weight: normal;
        font-size: 22px;
        color: #333;
        cursor: pointer;
      }

      &_spell {
        font-size: 16px;
        color: #999;
      }

      &_type {
        display: flex;
        font-size: 14px;
        color: #888;
        padding: 6px 0px;

        > span {
          margin-left: 4px;
        }
      }

      &_comment {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        align-items: flex-end;

        .hotelItemScore {
          background-color: rgba(0, 0, 0);
          padding: 2px;
          padding: 0px 6px 2px 6px;
          border-radius: 12px;
        }

        span {
          font-size: 13px;
          color: #333;

          > i {
            color: #ff9e48;
          }
        }
      }

      &_position {
        margin-top: 10px;
        display: flex;
        align-items: center;

        .el-icon-location {
          color: #666;
          font-size: 16px;
        }

        > span {
          font-size: 13px;
          color: #333;
          margin-left: 2px;
          margin-top: -2px;
        }
      }
    }

    &_partner {
      width: 210px;
      margin-left: 50px;
      margin-top: 30px;

      :hover {
        background: #f5f7fa;
      }

      &_item {
        display: flex;
        line-height: 36px;
        border-bottom: 1px solid #ddd;
        padding-left: 10px;
        line-height: 46px;
        cursor: pointer;

        &_left {
          flex: 1;
          font-size: 14px;
          color: #606266;
        }

        &_right {
          font-size: 12px;
          padding-right: 16px;
          color: #606266;

          em {
            color: #ff9e48;
            font-size: 16px;
          }

          .el-icon-arrow-right {
            color: #606266;
            font-size: 14px;
          }
        }
      }
    }
  }

  .el-pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 40px 0px;
  }
}
</style>